<!--
 * @author: sanbao
 * @Date: 2022-09-05 20:49:51
-->
<!--
 * @author: sanbao
 * @Date: 2022-09-05 14:56:57
-->
<style lang='scss' scoped>
#echarts6 {
  width: 100%;
  height: 100%;
}
</style>
<template>
  <div id="echarts6"></div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import { a } from "../api/index";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getdocument();
    });
    const getdocument = async () => {
      let myChart = echarts.init(document.getElementById("echarts6"));
      var dataa = [];
      const response = await a;
      dataa = response.importStatis.TopList.map((v) => {
        return { name: v.province, value: v.importedCase };
      });
      myChart.setOption({
        grid: {
          right: "3%",
          left: "10%",
          bottom: "12%",
          top: "5%",
        },
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        calculable: true,
        series: [
          {
            name: "增值电信业务统计表",
            type: "pie",
            radius: [15, 100],

            roseType: "area",
            data: dataa,
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    return {};
  },
};
</script>
